<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			canvas {
				/* width: 600px;
				height: 300px; */
				display: block;
				margin: 10px auto;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- 默认宽高 300/150 -->
		<canvas id="myCan" width="500px" height="500px">您的浏览器不支持canvas，请升级您的浏览器版本！</canvas>
		<script type="text/javascript">
			// 获取画布元素
			var oC = document.getElementById('myCan');
			// 获取绘制环境
			var ctx = oC.getContext('2d');
			// 绘制正方形
			// ctx.fillRect(0,0,100,100);
			ctx.fillRect(0, 0, 100, 100);
			// 绘制描边长方形
			ctx.strokeRect(200, 200, 200, 100);

			// 描边和填充
			
			//保存路径
			ctx.save();
			ctx.fillStyle = 'pink';
			ctx.strokeStyle = 'green';
			// 设置 线宽
			ctx.lineWidth = 20;
			ctx.rect(200, 50, 200, 100);
			//先画谁 谁就被盖
			ctx.fill(); //填充
			ctx.stroke(); //描边
			//恢复路径
			ctx.restore();
			// 开始前保存路径 save() 画完之后恢复路径 restore()
			
			ctx.fillRect(0,400,100,100);
			
			// 清除画布
			ctx.clearRect(0,0,500,500);
			
			ctx.fillRect(0,0,100,100);
		</script>
	</body>
</html>
